<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <input type="text" id="search" name="search" />
    <button>搜索</button>
    <div class="box"></div>
    <script>
        //sessionStorage
        //需求:点击搜索，将搜索内容放到 缓存里,将缓存的内容显示在页面上
        var oInput = document.querySelector('input');
        var oBtn = document.querySelector('button');
        var oDiv = document.querySelector('div');
        //刷新页面，调一下缓存
        writeHTML();
        oBtn.onclick = function () {
            var tt = oInput.value;
            //1.先从缓存中获取值,反序列化
            var arr = sessionStorage.getItem('sstext') == null ? [] : JSON.parse(sessionStorage.getItem('sstext'));
            console.log(arr);
            arr.push(tt);
            console.log(arr);
            //将搜索内容变为 序列化的东西 再保存缓存
            sessionStorage.setItem('sstext', JSON.stringify(arr));

            //
            writeHTML();
        }

        // 注意： sesssionStorage  和 localStorage 里面保存的必须是字符串，或者 序列化好的值
        //向缓存里存的时候进行 序列化,取出来之后反序列化

        //
        function writeHTML() {
            //获取缓存信息,反序列化,写入div
            var yy = JSON.parse(sessionStorage.getItem('sstext'));
            oDiv.innerHTML = yy;
        }

        //购物车：需要 在缓存里保存 商品id\商品名称、商品图片、商品的价格、商品的数量，写三个页 ,两个 商品页,一个 购物车页

    </script>
</body>

</html>